<template>
  <div class="container">
    <div class="left-column">

      <div class="left-item" v-show="showDivs[currentIndex].value.includes(1)" >
        <china-map ref="chinaMap" :inputValue="inputV" @province="getProvince"></china-map>
      </div>
      <div class="left-item" v-show="showDivs[currentIndex].value.includes(2)">
        <city-map ref="CityMap" :dataFromParent1="cityData"></city-map>
      </div>
      <div class="left-item" v-show="showDivs[currentIndex].value.includes(3)">
        <province-map ref="provinceMap" :dataFromParent="parentData" @city="getCity" ></province-map>
      </div>
      <div class="left-item" v-show="showDivs[currentIndex].value.includes(4)">
        <city-map ref="CityMap" :dataFromParent1="cityData"></city-map>
      </div>
      <div class="left-item" v-show="showDivs[currentIndex].value.includes(5)">
        <china-map ref="chinaMap" @province="getProvince"></china-map>
      </div>
      <button class="changeButton1" :title="buttonTitle" @click="ButtonClickUp">
        <i class="el-icon-refresh"></i>
      </button>
      <button class="changeButton2" :title="buttonTitle" @click="ButtonClickDown">
        <i class="el-icon-refresh"></i>
      </button>
    </div>
    <div class="right-column">
      <div style="width: 100%; height:100%;">
        <c-Map></c-Map>

        <FoldingSidebar >
          <!-- <input type="text" v-model="inputValue" @keyup.enter="notifyChild" placeholder="输入省份名称"> -->
          <div class="block">
            <span class="demonstration">选择城市</span>
            <el-cascader
                v-model="value"
                :options="options"
                :props="{ expandTrigger: 'hover' }"
                @change="handleChange"></el-cascader>
          </div>
        </FoldingSidebar>
      </div>
    </div>
  </div>
</template>

<script>
import CMap from "@/components/CMap.vue";
import CityMap from "@/components/CityMap.vue";
import FoldingSidebar from "@/components/FoldingSidebar.vue";
import ProvinceMap from "@/components/ProvinceMap.vue";
import { getCityOption} from "@/api/component";
import ChinaMap from "@/components/ChinaMap.vue";

export default {
  data() {
    return {
      cityData:{
        parentCode:'',
        Data:''
      },
      parentData: '',
      inputV:'',
      buttonTitle: '切换',
      showDivs: [
        { value: [1, 3], up: 1, down: 5 },
        { value: [2, 3], up: 0, down: 2 },
        { value: [2, 5], up: 3, down: 1 },
        { value: [3, 5], up: 2, down: 4 },
        { value: [3, 4], up: 5, down: 3 },
        { value: [1, 2], up: 4, down: 0 }
      ],
      currentIndex: 0, // 当前显示的节点索引
      value: [],
      options: [],
    };
  },
  components: {
    CMap,
    ChinaMap,
    FoldingSidebar,
    ProvinceMap,
    CityMap,
  },
  methods: {
    getCityOption(){
      getCityOption().then(res=>{
        if(res.code==200){
          this.options=res.data;
          console.log(res.data);
        }else{
          console.log("err")
        }
      });

    },
    ButtonClickUp(){
      this.toggleUp();
      this.notifyChild();
    },
    ButtonClickDown(){
      this.toggleDown();
      this.notifyChild();
    },
    toggleUp() {
      console.log(this.showDivs[this.currentIndex].value);
      this.currentIndex = this.showDivs[this.currentIndex].up;
      // this.parentData = this.parentData;
      // this.cityData.Data=this.cityData;
    },
    toggleDown() {
      this.currentIndex = this.showDivs[this.currentIndex].down;
      // this.parentData = this.parentData;
      // this.cityData.Data=this.cityData;
    },
    handleChange(){
      alert(this.value[0]);
      this.inputV = this.value[0];
      notifyChild();
    },
    notifyChild() {
      this.$refs.chinaMap.refresh();
      this.$refs.provinceMap.refresh();
      this.$refs.cityMap.refresh();
    },
    getProvince(data) {
      this.parentData = data;
      this.parentData.select=this.value[1];
      //const t=this.options.children.find((item) => item.value == this.value[1]);
      console.info(this.value[2])
      this.cityData.parentCode=this.parentData.code;
      this.cityData.Data=data;
      this.cityData.select=this.value[2];
      console.log(data)
      ////!

    },
    getCity(data){
      this.cityData.parentCode=this.parentData.code;
      this.cityData.Data=data;
      this.cityData.select=this.value[2];
    },
  },
  mounted(){
    this.getCityOption();
  },
};
</script>

<style>

.container {
  display: flex;
  width: 100%;
  height: 90vh;
  position: relative;

}
.left-column {
  display: flex;
  flex-direction: column;
  height: 90vh;
  width: 50vh;
}
.left-item {

  flex: 1;

  background-color: #f0f0f0;
  opacity: 0.5;
  box-shadow: inset 0 0 0 5px rgba(0, 0, 0, 0.5);
}
.changeButton1,
.changeButton2 {
  position: absolute;
  z-index: 999;
  width: 40px;
  height: 72px;
  background-color: #59AAF5;
  border-radius: 0px 14px 14px 0px;
  color: #000000;
  text-align: center;
  line-height: 72px;
}
.changeButton1 {
  top: 25%;
}
.changeButton2 {
  top: 75%;
}
.right-column {
  position: relative;
  border: 1px solid #000000;
  display: flex;

  flex: 1; /* 占据剩余空间 */
  width: 100vh;
}

</style>
